import type { Report } from "@server/src/schemas/reports";
import { Link } from "@tanstack/react-router";
import { AlarmClockIcon, CircleCheckIcon, CircleXIcon, FlaskConicalIcon } from "lucide-react";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { formatDate, rate } from "@/lib/utils";

export function ReportsItem({ report }: { report: Report }) {
  return (
    <Link to="/reports/$id" params={{ id: report.id }} key={report.id}>
      <Card
        key={report.id}
        className="gap-4 transition-colors duration-200 hover:cursor-pointer hover:bg-secondary hover:text-secondary-foreground"
      >
        <CardHeader>
          <CardTitle className="uppercase">{report.name}</CardTitle>
          <CardDescription>{formatDate(report.start)}</CardDescription>
        </CardHeader>
        <CardContent className="font-semibold text-3xl">
          <p>{rate(report.summary.statistic.passed, report.summary.statistic.total)} %</p>
        </CardContent>
        <CardFooter className="flex items-end gap-3 text-end text-xs">
          <div className="flex items-center gap-1.5">
            <FlaskConicalIcon className="size-3.5" />
            <p>{report.summary.statistic.total}</p>
          </div>
          <div className="flex items-center gap-1.5">
            <CircleXIcon className="size-3.5" />
            <p>{report.summary.statistic.total - report.summary.statistic.passed}</p>
          </div>
          <div className="flex items-center gap-1.5">
            <CircleCheckIcon className="size-3.5" />
            <p>{report.summary.statistic.passed}</p>
          </div>
          <div className="flex items-center gap-1.5">
            <AlarmClockIcon className="size-3.5" />
            <p>{Math.ceil(report.summary.time.duration / 1000)} s</p>
          </div>
        </CardFooter>
      </Card>
    </Link>
  );
}
